@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}

header{
    top: 0;
    box-sizing: border-box;
    width: 100%;
    height: vw(76);
    border-bottom: 1px solid #a7a7a7;
    .header-left{
        width: vw(22);
        height: vw(38);
        margin-left: vw(28);
        margin-top: vw(19);
        img{
            width: 100%;
        }
    }
    .header-right{
        font-size: vw(24);
        line-height: vw(24);
        margin-right: vw(30);
        margin-top: vw(26);
        a{
            color: #333333;
        }
    }
    .header-title{
        font-size: vw(30);
        line-height: vw(30);
        margin-top: vw(22);
        color: #191919;
        text-align: center;
    }
}

footer{
    position: absolute;
    width: 100%;
    height: vw(160);
    bottom: 0;
    .footer-box{
        width: vw(350);
        height: vw(90);
        margin: vw(12) auto 0;
        .footer-box-item{
            height: 100%;
            width: vw(100);
            .footer-box-item-pic{
                width: 100%;
                height: vw(48);
                text-align: center;
                img{
                    height: 100%;
                }
            }
            p{
                font-size: vw(16);
                line-height: vw(30);
                color: #4c4c4c;
                text-align: center;
            }
        }
        .footer-box-item:last-of-type{
            margin: 0 auto;
        }
    }
}

section{
    top: vw(76);
    bottom: vw(160);
    .register-content{
        width: 100%;
        color: #000000;
        text-align: center;
        p{
            font-size: vw(26.67);
            line-height: vw(26.67);
            margin-top: vw(98);
        }
        .register-content-msg{
            box-sizing: border-box;
            width: vw(456);
            margin: 0 auto;
            font-size: vw(24);
            line-height: vw(32);
            color: #333333;
            margin-top: vw(29);
            margin-bottom: vw(65);
        }
        .register-content-input{
            box-sizing: border-box;
            width: vw(352);
            margin: 0 auto;
            
            .register-content-input-item:first-of-type{
                margin-top: 0;
                select{
                    box-sizing: border-box;
                    width: vw(80);
                    height: 100%;
                    border-radius: vw(9) 0 0 vw(9);
                    border: none;
                    float: left;
                    background: #5c5c5c;
                    color: #ffffff;
                    font-size: vw(26.67);
                    outline: none;
                    appearance: none;
                    -moz-appearance: none;
                    -webkit-appearance: none;
                    padding-left: vw(15);
                }
                input[type="tel"]{
                    box-sizing: border-box;
                    width: vw(260);
                    letter-spacing: vw(1);
                }
            }
            
        }
    }
}

.register-content-input-item{
    box-sizing: border-box;
    width: 100%;
    height: vw(50);
    margin-top: vw(32);
    border: 1px solid #a8a9a8;
    border-radius: vw(10);
    .register-content-input-item-pic{
        float: left;
        height: vw(46);
        width: vw(36);
        position: relative;
        text-align: center;
//      vertical-align: top;
        img{
            height: 100%;
            position: absolute;
            left: 0;
//          margin-left: -50%;
        }
    }
    #register-content-input-item-pic1{
        height: vw(20);
        margin-top: vw(13);
        margin-left: vw(8);
    }
    #register-content-input-item-pic2{
        height: vw(26);
        width: vw(32);
        margin-top: vw(10);
        margin-left: vw(12);
    }
    #register-content-input-item-pic3{
        height: vw(23);
        width: vw(31);
        margin-top: vw(13);
        margin-left: vw(13);
    }
    input{
        float: left;
        background: transparent;
        box-sizing: border-box;
        width: vw(260);
        vertical-align: top;
        font-size: vw(21.34);
        color: #878787;
        padding-left: vw(15);
        height: 100%;
        border: none;
        overflow-x: hidden;
        letter-spacing: vw(2);
    }
}
.register-content-input-item:hover{
    border-color: #ff1234;
}
.register-content-input-item:last-of-type{
    border: none;
    input[type="button"]{
        background: #333333;
        height: 100%;
        width: 100%;
        border-radius: vw(10);
        color: #ffffff;
        font-size: vw(26.67);
        padding: 0;
    }
}
.login-box{
    width: vw(352);
    margin: vw(43) auto 0;
    .login-logo{
        width: 100%;
        
        .login-pic{
            width: vw(239);
            margin: 0 auto;
            img{
                width: 100%;
            }
        }
        p{
            font-size: vw(15);
            text-align: center;
        }
    }
    .login-input{
        width: 100%;
        input{
            width: vw(300);
            font-size: vw(18);
            border-radius: vw(9);
        }
    }
    .login-link{
        width: 100%;
        margin-top: vw(13);
        a{
            text-decoration: underline;
            color: #333333;
            font-size: vw(20);
            line-height: vw(20);
        }
        a:first-of-type{
            float: left;
        }
        a:last-of-type{
            float: right;
        }
    }
}

